﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Picker.aspx.cs" Inherits="AS.ImagePicker.Picker" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
		<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
		<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Pragma" content="no-cache" />
		<title>Image Picker</title>
		<meta http-equiv="EXPIRES" content="0" />
		<link href="submodal.css" rel="stylesheet" type="text/css" />
		<link href="jquery.Jcrop.css" rel="stylesheet" type="text/css" />
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script src="ui.core.js" type="text/javascript"></script>
        <script src="ui.draggable.js" type="text/javascript"></script>
        <script src="jquery.Jcrop.js" type="text/javascript"></script>
        <script src="submodalsource.js" type="text/javascript"></script>
		<link href="dialog.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="DialogHead.js"></script>

		<style type="text/css">	
			.row { HEIGHT: 22px }
			.cb { VERTICAL-ALIGN: middle }
			.itemimg { VERTICAL-ALIGN: middle }
			.editimg { VERTICAL-ALIGN: middle }
			.cell1 { VERTICAL-ALIGN: middle }
			.cell2 { VERTICAL-ALIGN: middle }
			.cell3 { PADDING-RIGHT: 4px; VERTICAL-ALIGN: middle; TEXT-ALIGN: right }
			.cb { }
		</style>
	</head>
	<body>
		<form runat="server" enctype="multipart/form-data" id="Form1"><div runat="server" id="ajaxdiv" style="padding:10px; width:100%">
			<!-- start hidden -->
			<input type="hidden" runat="server" id="hiddenDirectory" name="hiddenDirectory" />
			<input type="hidden" runat="server" id="hiddenFile" name="hiddenFile" /> 
			<input type="hidden" runat="server" enableviewstate="false" id="hiddenAlert" name="hiddenAlert" />
			<input type="hidden" runat="server" enableviewstate="false" id="hiddenAction" name="hiddenAction" /> 
			<input type="hidden" runat="server" enableviewstate="false" id="hiddenActionData" name="hiddenActionData" />
			<!-- end hidden -->
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td style="width:20">
<asp:Image id="Image1" Runat="server" ImageUrl="images/openfolder.gif"></asp:Image>
					</td>
					<td style="width:240" class="normal">
<asp:Label Runat="server" id="FolderDescription"></asp:Label>
					</td>
					<td>
<img id="CreateDir" alt="Createdirectory" style="cursor:pointer"
							src="images/newfolder.gif" onclick="CreateDir_click()" />
<img class="dialogButton" style="cursor:pointer" 
onclick="return ImageEditor()"
id="img_ImageEditor" src="images/imageeditor.gif" alt="ImageEditor" />
                        <asp:Button ID="btnCrop" CssClass="formbutton" runat="server" style="position:relative;top:-6px;color:red;"
                        OnClientClick="return checkFiletoCrop()"
                        Text="Crop Image" OnClick="btnCrop_Click" />&nbsp;&nbsp;
                        Width&nbsp;&nbsp;<input type="text" id="CW" style="width:50px" />&nbsp;&nbsp;
                        Height&nbsp;&nbsp;<input type="text" id="CH" style="width:50px" />
					</td>
				</tr>
			</table>
			<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					<td valign="top" style="white-space:nowrap; width:280px; OVERFLOW: auto">
						<div style="BORDER: 1.5pt inset;  VERTICAL-ALIGN: middle; OVERFLOW: auto; WIDTH: 280px; HEIGHT: 250px; Padding:0; BACKGROUND-COLOR: white">
							<asp:Table id="FoldersAndFiles" Runat="server" CellSpacing="1" CellPadding="0" Width="100%"
								CssClass="sortable">
								<asp:TableRow BackColor="#f0f0f0">
									<asp:TableHeaderCell Width="16px">
										<asp:ImageButton id="Delete" Runat="server" AlternateText="Deletefiles" ImageUrl="images/s_cut.gif"
											OnClick="Delete_Click" OnClientClick="return deleteFile()" />
									</asp:TableHeaderCell>
									<asp:TableHeaderCell Width="16px">
										<asp:ImageButton id="DoRefresh" Runat="server" AlternateText="Refresh" ImageUrl="images/s_refresh.gif"
											OnClick="DoRefresh_Click" />
									</asp:TableHeaderCell>
									<asp:TableHeaderCell id="name_Cell" Wrap="True" Width="145px" CssClass="filelistHeadCol" Font-Bold="False">Name</asp:TableHeaderCell>
									<asp:TableHeaderCell id="size_Cell" Width="62px" CssClass="filelistHeadCol" Font-Bold="False">Count/Size</asp:TableHeaderCell>
									<asp:TableHeaderCell id="op_Cell" Width="16px">&nbsp;</asp:TableHeaderCell>
									<asp:TableHeaderCell id="op_space" Width="1px"></asp:TableHeaderCell>
								</asp:TableRow>
							</asp:Table>
						</div>
						
						<table border="0" cellspacing="0" cellpadding="0" width="100%">
				<tr>
					
					<td valign="top" style="background-color:#ffffff">
						<fieldset>
							<legend>Image Picker</legend>
							<table border="0" cellpadding="4" cellspacing="0">
								<tr>
									<td>
										<table border="0" cellpadding="1" cellspacing="0" class="normal">
											<tr>
												<td valign="middle">
													Image Url:</td>
												<td colspan="3">
													<input type="text" id="TargetUrl"
														size="43" name="TargetUrl" runat="server" /></td>
												<td></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</fieldset>
						<fieldset id="fieldsetUpload">
							<legend>Upload (MaxSize 10M)</legend>
							<table border="0" cellspacing="2" cellpadding="0" width="100%" class="normal">
								<tr>
									<td style="width:8">
									</td>
								</tr>
								<tr>
									<td valign="top" id="uploader">
                                        <asp:FileUpload ID="fuImg" runat="server" />&nbsp;&nbsp;<asp:Button style="position:relative\9;top:2px\9;" ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
									</td>
								</tr>
								<tr>
									<td style="width:5">
									</td>
								</tr>
								<tr>
									<td>
										
									</td>
								</tr>
							</table>
						</fieldset>
						<br />
						<div>
                        <asp:Button ID="Button1" CssClass="formbutton" runat="server"
                        OnClientClick="return checkCrop()"
                         Text="   OK   " OnClick="Button1_Click" />
                        
                        &nbsp;&nbsp;&nbsp;
                        <input class="formbutton" type="button" value="   Cancel  " onclick="return close_Frame()" id="Button2" />
                        &nbsp;&nbsp;&nbsp;
                            <span style="color:Red;"><asp:Literal ID="ltrStatus" runat="server"></asp:Literal></span>
						</div>
					</td>
				</tr>
			</table>
						
					</td>
					<td width="2px"></td>
					<td valign="top">
						<div style="BORDER: 1.5pt inset; VERTICAL-ALIGN: top; OVERFLOW: auto; WIDTH: 400px; HEIGHT: 400px; BACKGROUND-COLOR: white; TEXT-ALIGN: center">
							<div id="divpreview" style="BACKGROUND-COLOR: white"><img id="img_demo" alt="" src="images/1x1.gif" /></div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="3" style="height:2">
					</td>
				</tr>
			</table>
			
			</div>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" style="display:none">
            </asp:DropDownList>
            <asp:HiddenField ID="X" runat="server" />

            <asp:HiddenField ID="Y" runat="server" />

            <asp:HiddenField ID="W" runat="server" />

            <asp:HiddenField ID="H" runat="server" />
		</form>
		
	</body>
	<script type="text/javascript" src="Dialog_InsertImage.js"></script>
</html>

<script type="text/javascript">
//    $(document).ready(function(){  
//    	set_crop();
//	}); 
	$(window).load(function(){
	    do_preview();
	    set_crop();
	});
    function set_crop(){
        var imgUrl=document.getElementById("TargetUrl").value;
        if(imgUrl!="")
            document.getElementById("img_demo").src=imgUrl;
        else
            document.getElementById("img_demo").src="images/1x1.gif";
            
        if(<%=ResizeMode%> == 0){
	        if(document.getElementById("img_demo").width><%=ImageWidth%>||document.getElementById("img_demo").height><%=ImageHeight%>){
		        $('#img_demo').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: false,
			        allowResize: <%=Resizable%>,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageHeight%> ],
			        aspectRatio: <%=ImageWidth%>/<%=ImageHeight%>
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 2){
	        if(document.getElementById("img_demo").width><%=ImageWidth%>){
		        $('#img_demo').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageWidth%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageWidth%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageWidth%>);
		    }
		}
		if(<%=ResizeMode%> == 3){
	        if(document.getElementById("img_demo").height><%=ImageHeight%>){
		        $('#img_demo').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageHeight%>, <%=ImageHeight%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageHeight%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageHeight%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 4){
	        if(document.getElementById("img_demo").width><%=ImageWidth%>||document.getElementById("img_demo").height><%=ImageHeight%>){
		        $('#img_demo').Jcrop({
			        onSelect: updateCoords,
			        allowSelect: true,
			        allowResize: true,
			        setSelect: [ 0, 0, <%=ImageWidth%>, <%=ImageHeight%> ],
			        aspectRatio: 0
		        });
		        $('#X').val(0);
    	        $('#Y').val(0);
    	        $('#W').val(<%=ImageWidth%>);
    	        $('#H').val(<%=ImageHeight%>);
    	        $('#CW').val(<%=ImageWidth%>);
    	        $('#CH').val(<%=ImageHeight%>);
		    }
		}
		if(<%=ResizeMode%> == 1){
	        $('#img_demo').Jcrop({
		        onSelect: updateCoords,
		        allowSelect: true,
		        allowResize: true,
		        aspectRatio: 0
	        });
	        $('#CW').val(0);
    	    $('#CH').val(0);
		}
	}

    function updateCoords(c)
    {
	    $('#X').val(c.x);
    	$('#Y').val(c.y);
    	$('#W').val(c.w);
    	$('#H').val(c.h);
    	$('#CW').val(c.w);
    	$('#CH').val(c.h);
    };
    
    function checkCrop(){
        var imgUrl=document.getElementById("TargetUrl").value;
        if(imgUrl==""){
            alert("Bạn chưa lựa chọn file ảnh");
            return false;
        }
        else{
            if(checkImageCrop()){
                try{
                    window.top.document.getElementById("<%=txtID%>").value = imgUrl;
                    window.top.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                    window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "block";
                    window.top.hidePopWin(false);
                }
                catch(err){
                    try{
                        window.parent.document.getElementById("<%=txtID%>").value = imgUrl;
                        window.parent.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                        window.parent.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "block";
                        window.parent.hidePopWin(false);
                    }
                    catch(err1){
                        window.opener.document.getElementById("<%=txtID%>").value = imgUrl;
                        window.opener.document.getElementById("ImgPicker_<%=txtID%>").src = imgUrl;
                        window.opener.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "block";
                        window.close();
                    }
                }
            }
            else
                alert("Bạn phải crop file ảnh để sử dụng !");
        }
        return false;
    }
    
    function close_Frame(){
        try{
            window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "block";
            window.top.hidePopWin(false);
        }
        catch(message){
            try{
                window.top.document.getElementById("DivImgPicker_<%=txtID%>").style.display = "block";
                window.parent.hidePopWin(false);
            }
            catch(message1){
                window.close();
            }
        };
        return false;
    }
    
    function checkImageCrop(){
        var imgObj=document.getElementById("img_demo");
        
        if(<%=ResizeMode%> == 0){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
                return true;
            else if((imgObj.width/imgObj.height) == (<%=ImageWidth%>/<%=ImageHeight%>))
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 2){
            if(imgObj.width <= <%=ImageWidth%>)
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 3){
            if(imgObj.height <= <%=ImageHeight%>)
                return true;
            else
                return false;
        }
        
        if(<%=ResizeMode%> == 4){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
                return true;
            else
                return false;
        }
        
        return true;
    }
    
    function deleteFile(){
        var frm1 = document.forms[0];
        var arg="";
        for (i = 0; i < frm1.elements.length; i++)
        {
            if (frm1.elements[i].type == "checkbox")
            {   
                var chk = frm1.elements[i];
                if(chk.checked){                  
                    var checkName = frm1.elements[i].name;                   
                    if(checkName.indexOf("row")!=-1)
                    {
                        var idRow = checkName.split("$")[0];
                        var row = document.getElementById(idRow);
                        var objUrl = row.getAttribute("path");
                        if(arg=="")
                            arg = objUrl;
                        else
                            arg = arg + "," + objUrl;
                    }
                }
            }
        }
        if(arg=="")
            alert("Bạn chưa chọn file hay thư mục để xóa");
        else{
            if(confirm("Bạn có chắc chắn muốn xóa không ?")){
                for (i = 0; i < frm1.elements.length; i++)
                {
                    if (frm1.elements[i].type == "checkbox")
                    {   
                        var chk = frm1.elements[i];
                        chk.checked = false;
                    }
                }
                __doPostBack("xoafile",arg);
            }
        }
        return false;
    }
    
    function checkFiletoCrop(){
        var imgUrl=document.getElementById("TargetUrl").value;
        
        var imgObj=document.getElementById("img_demo");
        
        if(imgUrl=="" || imgUrl=="images/1x1.gif")
        {
            alert("Bạn chưa chọn file ảnh để crop");
            return false;
        }
        else{
            if($('#W').val() == "" || $('#H').val() == ""){
                alert("Bạn chưa chọn phần ảnh để crop");
                return false;
            }
        }
            
        if(<%=ResizeMode%> == 0){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else if((imgObj.width/imgObj.height) == (<%=ImageWidth%>/<%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else
                return confirm("Bạn có chắc chắn muốn crop file ảnh này không ?");
        }
        
        if(<%=ResizeMode%> == 2){
            if(imgObj.width <= <%=ImageWidth%>)
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else
                return confirm("Bạn có chắc chắn muốn crop file ảnh này không ?");
        }
        
        if(<%=ResizeMode%> == 3){
            if(imgObj.height <= <%=ImageHeight%>)
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else
                return confirm("Bạn có chắc chắn muốn crop file ảnh này không ?");
        }
        
        if(<%=ResizeMode%> == 4){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else
                return confirm("Bạn có chắc chắn muốn crop file ảnh này không ?");
        }
        
        return confirm("Bạn có chắc chắn muốn crop file ảnh này không ?");
    }
    function ImageEditor(){
        var imgUrl=document.getElementById("TargetUrl").value;
        
        var imgObj=document.getElementById("img_demo");
        
        if(imgUrl=="" || imgUrl=="images/1x1.gif")
        {
            alert("Bạn chưa chọn file ảnh để crop");
            return false;
        }
        
        if(<%=ResizeMode%> == 0){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
            else if((imgObj.width/imgObj.height) == (<%=ImageWidth%>/<%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
        }
        
        if(<%=ResizeMode%> == 2){
            if(imgObj.width <= <%=ImageWidth%>)
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
        }
        
        if(<%=ResizeMode%> == 3){
            if(imgObj.height <= <%=ImageHeight%>)
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
        }
        
        if(<%=ResizeMode%> == 4){
            if((imgObj.width <= <%=ImageWidth%>) && (imgObj.height <= <%=ImageHeight%>))
            {
                alert("File ảnh bạn đang chọn không cần phải crop");
                return false;
            }
        }

        var wImg = imgObj.width + 20;
        var hImg = imgObj.height + 30;
        var left   = (screen.width  - wImg)/2;
        var top    = (screen.height - hImg)/2;
        window.open('ImageEditor.aspx?url='+imgUrl+'&ssID=<%=ssID %>&ImageWidth=<%=ImageWidth %>&ImageHeight=<%=ImageHeight %>&Resizable=<%=Resizable %>&ResizeMode=<%=ResizeMode %>','mywindow','width='+wImg+',height='+hImg+',top='+top+',left='+left+',location=0,status=0,scrollbars=0,toolbar=0,resizable=0,menubar=0,titlebar=0')

        return false;
    }
    function Refresh_onclose(t){
        __doPostBack("refresh",t) ;
    }
</script>

